// 创建虚拟 DOM 节点的函数
function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map(child =>
        typeof child === 'object' ? child : createTextElement(child)
      )
    }
  };
}

// 创建文本类型的虚拟 DOM 节点
function createTextElement(text) {
  return {
    type: 'TEXT_ELEMENT',
    props: {
      nodeValue: text,
      children: []
    }
  };
}

// 将虚拟 DOM 转换为真实 DOM 节点
function render(vdom, container) {
  const dom =
    vdom.type === 'TEXT_ELEMENT'
      ? document.createTextNode(vdom.props.nodeValue)
      : document.createElement(vdom.type);

  const isProperty = key => key !== 'children';
  Object.keys(vdom.props)
    .filter(isProperty)
    .forEach(name => {
      dom[name] = vdom.props[name];
    });

  vdom.props.children.forEach(child => {
    render(child, dom);
  });

  container.appendChild(dom);
}

// 示例使用
const vdom = createElement(
  'div',
  { id: 'container' },
  createElement('h1', null, 'Hello, Virtual DOM!'),
  createElement('p', null, 'This is a simple example.')
);

const container = document.getElementById('root');
render(vdom, container);
